<template>
  <div>
    <search-form
      :search-config="searchConfig"
      :label-width="150"
      @clear="clearSearch"
      @search="handleSearch"
      @visible-change="handleVisibleChange"
    />
    <c-permission-tabs v-model="activeTab" code="tab" type="card">
      <el-tab-pane label="全部" name="all" lazy>
        <Table ref="all" type="all" :filters-raw="filtersRaw" :params-raw="paramsRaw" />
      </el-tab-pane>
      <el-tab-pane label="未分配" name="tobe_allocate" lazy>
        <Table ref="tobe_allocate" type="tobe_allocate" :filters-raw="filtersRaw" :params-raw="paramsRaw" />
      </el-tab-pane>
    </c-permission-tabs>
  </div>
</template>

<script>
import Table from './components/table.vue'
export default {
  name: 'PotentialCustomer',
  components: {
    Table
  },
  props: {
  },
  data() {
    return {
      searchConfig: [
        { label: '意向客户电话', prop: 'customerPhone', type: 'text', value: '', placeholder: '' },
        { label: '意向客户姓名', prop: 'customerName', type: 'text', value: '', placeholder: '' },
        {
          label: '所属办事处',
          prop: 'agencyCode',
          type: 'dialog',
          value: '',
          placeholder: '',
          config: {
            requestMethod: 'post',
            remoteUrl: '/select-service/api/v1/organization/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            selectData: []
          },
          dialogConfig: {
            title: '所属办事处',
            interfacePath: '/select-service/api/v1/organization/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [{ 'id': 'isOffice', 'property': 'isOffice', 'value': '1', 'operator': '=' }],
            pageFlag: true
          }
        },
        {
          type: 'select',
          prop: 'intendedLevel',
          label: '意向等级',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_INTENTION_LEVEL`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'select',
          prop: 'followUpStage',
          label: '跟进进度',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_INTEND_CUS_FOLLOW_UP_PROGRESS`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          label: '招商经理',
          prop: 'managerName',
          type: 'text',
          value: '',
          placeholder: '招商经理'
          // config: {
          //   requestMethod: 'post',
          //   remoteUrl: '/slm-ctm/api/v1/ctmInvestmentManager/page',
          //   paramField: 'managerName', // 远程搜索参数名
          //   defaultProps: {
          //     label: 'managerName',
          //     value: 'id'
          //   },
          //   filtersRaw: [
          //     // { 'id': 'state', 'property': 'state', 'value': '1', 'operator': '=' }
          //   ],
          //   selectData: []
          // },
          // dialogConfig: {
          //   title: '招商经理',
          //   interfacePath: '/slm-ctm/api/v1/ctmInvestmentManager/page',
          //   setting: [{ prop: 'managerAccount', title: '编码' }, { prop: 'managerName', title: '名称' }],
          //   filtersRaw: [
          //     // { 'id': 'state', 'property': 'state', 'value': '1', 'operator': '=' }
          //   ],
          //   pageFlag: true
          // }
        },
        {
          label: '意向客户经营类型',
          prop: 'intendedBusiness',
          type: 'dialog',
          value: '',
          placeholder: '',
          operator: 'LIKE',
          config: {
            requestMethod: 'post',
            remoteUrl: '/select-service/api/v1/custDocDef/page',
            paramField: 'keyWord', // 远程搜索参数名
            defaultProps: {
              label: 'name',
              value: 'code'
            },
            filtersRaw: [
              { 'id': 'state', 'property': 'state', 'value': 'QY037', 'operator': '=' }
            ],
            selectData: []
          },
          dialogConfig: {
            title: '意向客户经营类型',
            interfacePath: '/select-service/api/v1/custDocDef/page',
            setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }],
            filtersRaw: [
              { 'id': 'custDocCode', 'property': 'custDocCode', 'value': 'QY037', 'operator': '=' }
            ],
            pageFlag: true
          }
        },
        {
          type: 'select',
          prop: 'channel',
          label: '来源渠道',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_POTENTIAL_CUSTOMER_SOURCE`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'select',
          prop: 'customerSource',
          label: '客户来源',
          value: '',
          placeholder: '',
          config: {
            remote: true,
            // paramField: 'keyWord',// 远程搜索参数名
            remoteUrl: `/data-dict/api/v2/dictionary/CTM_TOBE_CUSTOMER_DATA_FROM`,
            defaultProps: {
              label: 'dictName',
              value: 'dictCode'
            },
            paramsRaw: { appCode: 'slm', domainCode: 'marketing' },
            apiHeader: {
              // 'Permission-Code': 'per_pur_order_middle_page',
              // 'Permission-App': 'slm'
            }
          }
        },
        {
          type: 'text',
          prop: 'intendedCity',
          label: '意向加盟城市',
          value: '',
          placeholder: ''
        }

      ],
      activeTab: 'all',
      filtersRaw: [],
      paramsRaw: {}
    }
  },
  computed: {
  },
  watch: {
    activeTab(v) {
      if (this.$refs[v]) {
        this.$nextTick(() => {
          this.refreshTableBoxData('onPage')
        })
      }
    }
  },
  methods: {
    clearSearch() {
      this.filtersRaw = []
      this.paramsRaw = []
    },
    handleSearch({ filtersRaw, paramsRaw }) {
      this.filtersRaw = filtersRaw
      this.paramsRaw = paramsRaw
      this.refreshTableBoxData()
    },
    handleVisibleChange() {
      const activeTab = this.activeTab
      this.$nextTick(() => {
        this.$refs[activeTab] && this.$refs[activeTab].refreshTableHeight()
      })
    },
    refreshTableBoxData(flag) {
      const activeTab = this.activeTab
      this.$nextTick(() => {
        this.$refs[activeTab] && this.$refs[activeTab].refreshTableBoxData(flag)
      })
    }
  }
}
</script>
